<script setup>
  import { onMounted } from 'vue'
  // 注意点1：等页面组件挂载完毕后，再获取节点信息
  onMounted(() => {
    const selectorQuery = uni.createSelectorQuery()

    selectorQuery.select('.box').boundingClientRect((info) => {
      console.log(`盒子的宽度：${info.width}px, 盒子的高度：${info.height}px`)
    })

    selectorQuery.select('.box').boundingClientRect((rect) => {
      console.log(rect)
    })

    selectorQuery.selectViewport().boundingClientRect((rect) => {
      console.log('selectViewport', rect)
    })
    // 注意点2：必须执行后才能生效
    selectorQuery.exec()
  })
</script>
<template>
  <view>
    <view class="box">盒子</view>
    <custom-form></custom-form>
  </view>
</template>

<style>
  .box {
    width: 200rpx;
    height: 200rpx;
    background-color: pink;
  }
</style>
